<template>
  <div class="radioMoreList" :style="'background:url('+pic+') center/cover no-repeat'">
    <div class="top">
      <van-nav-bar title="歌词" right-text="···" left-arrow @click-left="onClickLeft" />
    </div>
    <ul ref="lyricUL" class="oUl">
      <li
        v-for="(item, i) in lyricsObjArr"
        :style="{color: lyricIndex === i ? 'skyblue' : '#ded9d9'}"
        :key="item.uid"
        :data-index="i"
        ref="lyric"
      >{{item.lyric}}</li>
    </ul>
    <div>
      <audio @timeupdate="updateTime" :src="musicGo" id="myVideo" autoplay></audio>
    </div>
  </div>
</template>
<script>
import { Toast } from 'vant';
export default {
  data: () => ({
    id: '',
    musicGo: '',
    lyric: '',//歌词数据
    lyricsObjArr: [],
    lyricIndex: '0',
    pic: ''
  }),
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    updateProgress(currentTime, duration) { // 更新进度条
      const precent = `${((currentTime / duration) * 100).toFixed(5)}%`
      this.precent = precent
    },
    formatTime(time) {
      if (time === 0) {
        this.curTime = '00:00'
        return
      }
      const mins = Math.floor(time / 60) < 10 ? `0${Math.floor(time / 60)}` : Math.floor(time / 60)
      const sec = Math.floor(time % 60) < 10 ? `0${Math.floor(time % 60)}` : Math.floor(time % 60)
      return `${mins}:${sec}`
    },
    updateTime(e) { // timeupdate时获取当前播放时间
      const { currentTime } = e.target
      this.currentTime = currentTime
      this.curTime = this.formatTime(currentTime) === 'undefined' ? '00:00' : this.formatTime(currentTime)
      this.updateProgress(currentTime, this.duration)
      // 匹配歌词
      for (let i = 0; i < this.lyricsObjArr.length; i++) {
        if (this.currentTime > (parseInt(this.lyricsObjArr[i].time))) {
          const index = this.$refs.lyric[i].dataset.index
          if (i === parseInt(index)) {
            this.lyricIndex = i
            this.$refs.lyricUL.style.transform = `translateY(${170 - (50 * (i + 1))}px)`
          }
        }
      }
    },
    getParams() {
      var routerParams = this.$route.query.id
      var routerParamsPic = this.$route.query.pic
      this.pic = routerParamsPic
      this.id = routerParams
      console.log(this.pic);
    },
    async getMusicPlay() {
      try {
        const res = await this.$http.getMusicPlay(this.id);
        this.musicGo = res.data.response.playLists[0]
      } catch (error) {
        Toast('该歌曲为VIP歌曲,请充值')
      }
    },
    // 时间转换
    formatLyricTime(time) { // 格式化歌词的时间 转换成 sss:ms
      const regMin = /.*:/
      const regSec = /:.*\./
      const regMs = /\./

      const min = parseInt(time.match(regMin)[0].slice(0, 2))
      let sec = parseInt(time.match(regSec)[0].slice(1, 3))
      const ms = time.slice(time.match(regMs).index + 1, time.match(regMs).index + 3)
      if (min !== 0) {
        sec += min * 60
      }
      return Number(sec + '.' + ms)
    },

    // 获取歌词并进行拆分
    async getLyric() {
      try {
        // 取出歌词
        const res = await this.$http.getLyric(this.id)
        let lyric = res.data.response.lyric

        // 每行歌词的数组
        const regNewLine = /\n/
        const lineArr = lyric.split(regNewLine)

        // 匹配[]中的时间
        const regTime = /\[\d{2}:\d{2}.\d{2,3}\]/
        // 对lineArr数组进行遍历分隔
        lineArr.forEach(item => {
          if (item === '') return
          const obj = {}
          const time = item.match(regTime)

          obj.lyric = item.split(']')[1].trim() === '' ? '' : item.split(']')[1].trim()
          obj.time = time ? this.formatLyricTime(time[0].slice(1, time[0].length - 1)) : 0
          obj.uid = Math.random().toString().slice(-6)
          if (obj.lyric === '') {
            console.log('这一行没有歌词')
          } else {
            this.lyricsObjArr.push(obj)
          }
        })
        console.log(this.lyricsObjArr);
      } catch (error) {
        Toast('该歌曲为VIP歌曲,请充值')
      }
    }
  },
  created() {
    this.getParams()
    this.getMusicPlay()
    this.getLyric()
  },
  watch: {
    '$route': 'getParams'
  }
}
</script>
<style lang="scss" scoped>
.radioMoreList {
  overflow: hidden;
  width: 100%;
  text-align: center;
  background-color: rgba($color: #000000, $alpha: 0.5);
  .musicShow {
    width: 100%;
    background-color: rgba($color: #eee, $alpha: 1);
    position: relative;
    z-index: 1;
    .title {
      padding-top: 80px;
      font-size: 20px;
      font-weight: 600;
      color: #999;
    }
    .txtAutor {
      margin-top: 12px;
      font-size: 16px;
      padding-bottom: 80px;
    }
  }
}
.oUl {
  height: 643px;
  width: 100%;
  line-height: 52px;
  font-family: cursive;
  text-align: center;
  font-size: 24px;
}
</style>